<template>
	<view class="login-view" style="" :class="{ showLogin: isLoginPage }">
		<view class="t-login">
			<form class="cl">
				<view class="t-a">
					<text class="txt">手机号</text>
					<input type="number" name="phone" placeholder="请输入您的手机号" maxlength="11" v-model="loginData.phone" />
				</view>
				<view class="t-a">
					<text class="txt">密码</text>
					<input type="password" name="code" maxlength="18" placeholder="请输入您的密码" v-model="loginData.password" />
				</view>
				<view class="btns">
					<u-button @tap="handleLogin" type="success" plain ripple :hair-line="false" :loading="isLogin">登 录</u-button>
					<u-button @tap="handleForget" type="success" plain ripple :hair-line="false" :disabled="isLogin">忘记密码</u-button>
				</view>
			</form>
			<view class="t-f"><text>—————— 第三方账号登录 ——————</text></view>
			<view class="t-e cl">
				<view class="t-g" @tap="wxLogin()"><image src="https://zhoukaiwen.com/img/loginImg/wx.png"></image></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Login',
	props: ['isLoginPage', 'handleChangeScene'],
	data() {
		return {
			isLogin: false, // 正在登陆中
			loginData: {
				phone: '13838673805', //手机号码
				password: '152728197805043034' //密码
			}
		}
	},
	methods: {
		/* 登录按钮回调 */
		async handleLogin() {
			this.isLogin = true
			const { phone, password } = this.loginData
			// 校验信息
			if (!phone) {
				this.$showToast.none('请输入您的手机号')
				// } else if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(phone)) {
				// this.$showToast.none("请输入正确手机号");
			} else if (!password) {
				this.$showToast.none('请输入您的密码')
			} else {
				/* 信息无误 */
				try {
					// 请求登录
					console.log('start login');
          let res = await this.$axios({
            method: 'post',
            url: '/login',
            data: this.loginData
          })
					console.log(res);
					this.isLogin = false
					uni.setStorage({ key: 'admin', data: JSON.stringify(res.userInfo.admin) })
					uni.setStorage({ key: 'userInfo', data: JSON.stringify(res.userInfo) })
					// 跳转到主页
					uni.switchTab({ url: '/pages/msg/index' })
				} catch (error) {
					this.isLogin = false
					this.$showToast.error('数据出错')
				}
			}
		},
		/* 忘记密码按钮回调 */
		handleForget() {
			this.$emit('handleChangeScene', false)
			// console.log(this);
		},
		/* 微信登录按钮回调 */
		wxLogin() {
			this.$showToast.none('微信登录模块开发中...')
		}
	}
}
</script>

<style scoped>
.txt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.reg {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}

.login-view {
	width: 100%;
	position: absolute;
	left: -100%;
	margin-top: -120rpx;
	background-color: #ffffff;
	border-radius: 8% 8% 0% 0;
	transition: all 1s;
	transform: scale(0.5);
	opacity: 0.3;
}
.login-view.showLogin {
	left: 0;
	transform: scale(1);
	opacity: 1;
}

.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	padding-top: 80rpx;
}

.t-login button {
	font-size: 28rpx;
	/* background: #2796f2; */
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
}

.t-login input {
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	border-bottom: 1px solid #e9e9e9;
	font-size: 28rpx;
}

.t-login .t-a {
	position: relative;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	margin: 0 auto;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 150rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}

.btns > button:first-child {
	margin-bottom: 10px;
}
</style>
